<template>
  <div class="bar-main-content">
    <div class="bar-main-content-item" v-for="(item, index) of barData" :key="index">
      <span class="bar-main-content-item-label">{{item.label}}</span>
      <div class="bar-main-content-item-content">
        <div class="bar-main-content-item-content-value">
          <div style="width: 100%; background-color: #08AAFF66; position: relative">
            <div class="bar-main-content-item-content-value__forecast" :style="{ width: `${(item.forecast / item.sum)*100}%` }"></div>
          </div>
          <div style="width: 100%; background-color: #08AAFF66; position: relative">
            <div v-show="isExistAfterRegulation" class="bar-main-content-item-content-value__after-regulation" :style="{ width: `${(item.afterRegulation / item.sum)*100}%` }"></div>
          </div>
        </div>
        <div class="bar-main-content-item-content-info">
          <span>预测：{{ item.unit === '￥' ? `${item.unit}${item.forecast}` : `${item.forecast}${item.unit}` }}</span>
          <span v-show="isExistAfterRegulation">调控后：{{ item.unit === '￥' ? `${item.unit}${item.afterRegulation}` : `${item.afterRegulation}${item.unit}`}}</span>
          <span>预计{{item.percentage}}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineExpose, defineProps, inject, onMounted, onUnmounted, ref, shallowRef, watch} from "vue";
import {pxToRem} from "@/utils/index";

const props = defineProps({
  barData: {
    type: Array,
    default: () => []
  },
  isExistAfterRegulation: {
    type: Boolean,
    default: true
  }
});

const initData = () => {

}

onMounted(() => {
  initData();
})
</script>

<style scoped lang="less">
.bar-main-content {
  width: 100%;
  &-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    &-label {
      font-size: 14px;
    }
    &-content {
      margin-left: 24px;
      flex: 1;
      &-value {
        width: 100%;
        border-radius: 50px;
        display: flex;
        flex-direction: column;
        > div {
          height: 16px;
          border-radius: 50px;
        }
        > div:not(first-child) {
          margin-top: 5px;
        }
        &__forecast {
          position: absolute;
          left: 0;
          height: 100%;
          background-color: #00FBFF;
          border-radius: 50px;
        }
        &__after-regulation {
          position: absolute;
          left: 0;
          height: 100%;
          background-color: #F45454;
          border-radius: 50px;
        }
      }
      &-info {
        position: relative;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        span:nth-of-type(2) {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
        }
      }
    }
  }
  &-item:last-child {
    margin-bottom: 0;
  }
}
</style>